{if $data|count > 0 && $data|is_array}

<div id="upcomingEvents" align="center" class="">
	<h2>Upcoming Events</h2>
	<div class="" style="height: 230px">
		<p>
			Next Event: <span class="label label-inverse">{$data.Name}</span>
		</p>
		<div class="row-fluid" align="center">
			<div class="span4">
				<div>
					<strong>Starting at</strong>
				</div>
				<div style="font-size: 13px;">{$data.StartTimestamp|date_format:"%d.%m.
					- %H:%M"}</div>
			</div>
			<div class="span2">
				<div class="t" title="Match-Mode">
					<strong>MM</strong>
				</div>
				<div class="t badge badge-info" title="{$data.MatchModeName}">{$data.MMShortcut}</div>

			</div>
			<div class="span2">
				<div class="t" title="Region">
					<strong>RE</strong>
				</div>
				<div class="t badge badge-important" title="{$data.RegionName}">{$data.RShortcut}</div>
			</div>
			<div class="span2">
				<div class="t" title="Tournament-Type">
					<strong>TT</strong>
				</div>
				<div class="t badge badge-warning" title="{$data.TTName}">{$data.TTShortcut}</div>
			</div>
			<div class="span2">
				<div class="t" title="Min Players">
					<strong>MP</strong>
				</div>
				<div class="label">{$data.MinSubmissions}</div>
			</div>
		</div>
		
			<div class="row-fluid">
				<div class="span8">
				<h3>
					
					<script type="text/javascript">
						{literal}
						$(document).ready(function() {
							// create a new javascript Date object based on the timestamp
							// multiplied by 1000 so that the argument is in milliseconds, not seconds
							var date = new Date({/literal}{$date.StartSubmissionTimestamp}{literal}*1000);
							// hours part from the timestamp
							var hours = date.getHours();
							// minutes part from the timestamp
							var minutes = date.getMinutes();
							// seconds part from the timestamp
							var seconds = date.getSeconds();
							
							$('#eventClock').countdown({until: liftoffTime, format: 'dHM'});
						});
						{/literal}
					</script>
					<span id="eventClock"></span>
				</h3>
				</div>
				<div class="span4">
					 <div class="label label-important t" title="XXX Players already singed-in to this Event" style="margin-top:20px">XXX Players</div>
				</div>
			</div>
			
		
		<strong>Description:</strong>
		<p class="well well-small" style="overflow: auto; max-height: 50px;">{$data.Description}</p>
	</div>
	<div>
		<button class="btn btn-block btn-primary disabled">Join Event</button>
	</div>

</div>

{/if}
